<template>
  <div class="wrap1">
    <div class="wrapper">
      <Top :projectId="baojing"></Top>
      <div class="shu-moluai">

        <div class="main-dianli-bottomgg" id="style-1">
          <div class="shaixuan">
            <div class="wendutable">
              区所选择:
              <el-select v-model="value" placeholder="请选择" @change="qiehuan">
                <el-option
                  v-for="item in departList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
<!--            采集时间-->
            <div style="color:#00ccff;margin-right: 40px;">采集时间: &nbsp;{{times}}</div>
          </div>
          <div class="main-dianli-kuai" style="padding-top:25px" v-if="valTrue">
            <div
              class="dianli-peidian"
              v-for="(parentsItem, parentsIndex) in aaa"
              :key="parentsIndex"
            >
              <div class="mainbg-tit diyige">
                <div class="biaoti">{{ parentsItem.cabinetName }}</div>

                <div style="width:70%" class="title-tah">
                  <div class="xinzengde">
                    <div style="font-size: 12px;margin-right: 5px"></div>
                    <div><span style="color:#fff;line-height: 40px;"></span></div>
                    <div class="wendu-conmid" style="">
                      <div class="shangcon">
                      <span class="chengsezi" style="margin-right: 15px"
                      >{{ parentsItem.early_warn_value }}</span
                      ><span class="colred">{{ parentsItem.warn_value }}</span>
                      </div>
                      <div class="shangcon">
                        <span>预警</span><span>报警</span>
                      </div>
                    </div>
                    <div
                      class=""
                      style="color:#fff; padding-top:3px;padding-left: 10px;"
                    >
                    <span v-if="parentsItem.status == '报警'" class="colred"
                    ><img src="../../../static/image/xiaobj.png"
                    /></span>
                      <span
                        v-else-if="parentsItem.status == '预警'"
                        class="chengsezi"
                      ><img src="../../../static/image/xiaobjcs.png"
                      /></span>
                      <span v-else
                      ><img src="../../../static/image/xiaobjls.png" style="padding-top: 5px"
                      /></span>
                    </div>
                  </div>
                </div>

              </div>
              <div class="dianli-con" @click="goDetails(parentsItem.cabinetId)">
                <div class="jian-ggg" id="style-1">
                  <div class="current">
                    <div>空气温度：<span :class="(parentsItem.points[0].value<parentsItem.early_warn_value)?'green':((parentsItem.points[0].value>=parentsItem.early_warn_value&&parentsItem.points[0].value<parentsItem.warn_value)?'chengsezi':'red')">{{ parentsItem.points[0].value }} ℃</span></div>
                    <div>空气湿度：<span :class="(parentsItem.points[1].value<parentsItem.early_warn_value)?'green':((parentsItem.points[1].value>=parentsItem.early_warn_value&&parentsItem.points[1].value<parentsItem.warn_value)?'chengsezi':'red')">{{ parentsItem.points[1].value }} %rh</span></div>

                  </div>

                </div>
              </div>
            </div>
          </div>
          <!-- 右边模块一 -->
        </div>

        <!-- 右边结束 -->
      </div>
    </div>
  </div>
</template>
<script>
import Top from "../../components/common/top.vue";

export default {
  components: {Top},
  data() {
    return {
      baojing: 0, //不想
      currentIndex: 0,
      departList: [],
      pId: "",
      equipList: [],
      valTrue: true,
      value: "伦镇控制室",
      options: [],
      deptId: 3,
      aaa: [],
      times:""
    };
  },
  beforeDestroy() {
    clearInterval(this.tm2);
  },
  created() {
    this.getseletop();
    if (this.$route.query.pId) {
      this.pId = this.$route.query.pId;
    }
    if (this.$route.query.currentIndex) {
      this.currentIndex = this.$route.query.currentIndex;
    }
  },
  mounted() {
    this.roomsfun();
    this.warningfun();
    this.tm2 = setInterval(() => {
      this.warningfun();
    }, 30000);
  },
  methods: {
    getseletop() {
      let userId=this.$auth.get("userid")
      this.$apiv.LoginGetDept({
          id:userId
      }).then(deptRes=>{
          console.log("根据用户id返回dept",deptRes);
          this.departList = deptRes.data;
          this.value=this.departList[0].name
          this.deptId=this.departList[0].id
          this.roomdetailsfun();
      })
      // this.$apiv.setsectlt({}).then(res => {
      //   console.log(res, "选择框");
      //   this.options = res.data;
      //   this.value = res.data[0].name;
      //   this.deptId = res.data[0].deptId;
      //   this.roomdetailsfun();
      // });
    },
    qiehuan(value) {
      console.log("地区",value);
      this.deptId = value;
      this.roomdetailsfun();
      // if (value == '3') {
      //   this.valTrue = false;
      // } else {
      //   this.valTrue = true;
      // }
    },
    warningfun() {
      this.loginLoading = true;
      this.$apiv
        .warning({})
        .then(res => {
          console.log("ggg", res.data);
          if (res.data.is_ok == true) {
            this.baojing = 1;
          } else {
            this.baojing = 0;
          }
          this.loginLoading = false;
        })
        .catch(res => {
          this.loginLoading = false;
        });
    },
    roomsfun() {
      this.loginLoading = true;
      let userId=this.$auth.get("userid")
      this.$apiv.LoginGetDept({
          id:userId
      }).then(deptRes=>{
          console.log("根据用户id返回dept",deptRes);
          this.departList = deptRes.data;
          let data=deptRes.data;
          if (data.length > 0) {
              this.pId = data[0].deptId;
          }
          this.roomdetailsfun();
          this.loginLoading = false;
      }).catch(res => {
          this.loginLoading = false;
      });
      // this.$apiv
      //   .rooms({})
      //   .then(res => {
      //     this.departList = res.data;
      //     if (res.data.length > 0) {
      //       this.pId = res.data[0].deptId;
      //     }
      //     this.roomdetailsfun();
      //     this.loginLoading = false;
      //   })
      //   .catch(res => {
      //     this.loginLoading = false;
      //   });
    },
    goDepartEquip(index, id) {
      this.currentIndex = index;
      this.pId = id;
      this.roomdetailsfun();
    },
    roomdetailsfun() {
      this.loginLoading = true;
      console.log("地区",this.deptId);
      this.$apiv
        .tah({deptId:this.deptId})
        .then(res => {
          console.log("111",res.data);
          this.aaa = res.data;
          this.times = res.data[0].update_time;
          console.log("时间",this.times);
          this.loginLoading = false;
        })
        .catch(res => {
          this.loginLoading = false;
        });
    },
    goDetails(id) {
      this.$router.push({
        path: "/tandh_detail",
        query: {
          pId: this.pId,
          cabinetId: id,
          currentIndex: this.currentIndex
        }
      });
    }
  }
};
</script>

<style scoped>
@import url("../../../static/zhuti.css");
.biaoti {
  font-weight: bold;
  font-size: 20px;
  line-height: 50px;
  width:100%;
}
.wendu-conmid {
  font-size: 11px;
  text-align: center;
  height: 40px;
  color: #FFF;
  padding-top: 5px;
  width:100px;
}
.mainbg-tit {
  height: 50px;
  color: #00ccff;
  line-height: 40px;
  padding-left: 25px;
  padding-right: 15px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.current {
  color: #fff;
  margin-top: 30px;
  font-size: 20px;
}
.current div{
  margin:10px auto;
  width:200px;
}
.shaixuan {
  display: flex;
  justify-content: space-between;
}

.title-tah {
  display: flex;
  justify-content: end;
  font-size: 10px;
}
</style>
